<template>
  <div class="box">
    <div class="table">
      <div class="top">
        <div>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </div>
        <div class="top_item">
          <el-button type="primary" @click="sou">查询</el-button>
          <el-button type="primary" @click="add">新增检测人员</el-button>
          <el-button type="primary" @click="delall">批量删除</el-button>
        </div>
      </div>
      <div class="biao">
        <el-table :data="FenTable" style="width: 100%" @selection-change="allselect">
          <el-table-column type="selection" width="55" />
          <el-table-column property="stuNo" label="ID" width="250" />
          <el-table-column property="stuName" label="检测人员" width="250" show-overflow-tooltip />
          <el-table-column property="image" label="检测实时图" width="250">
            <template #default="scope">
              <el-image :src="scope.row.image" style="width: 80px; height: 80px" />
            </template>
          </el-table-column>
          <el-table-column property="bourn" label="检测区域" width="250" />
          <el-table-column property="switch" label="环境监测状态">
            <template #default="scope">
              <el-switch v-model="scope.row.switch" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="small">查看</el-button>
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                编辑
              </el-button>
              <el-popconfirm
                title="您确认要删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @cancel="quxaio"
                @confirm="confirm(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增 -->
      <el-dialog v-model="dialogFormVisible" :title="flag ? '新增' : '编辑'" width="500">
        <el-form :model="form">
          <el-form-item label="ID" :label-width="formLabelWidth" v-if="flag == false">
            <el-input
              v-model="form.stuNo"
              autocomplete="off"
              placeholder="请输入检测人员"
              :disabled="flag == false"
            />
          </el-form-item>
          <el-form-item label="检测人员" :label-width="formLabelWidth">
            <el-input v-model="form.stuName" autocomplete="off" placeholder="请输入检测人员" />
          </el-form-item>
          <el-form-item label="检测实时图" :label-width="formLabelWidth">
            <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon><Plus /></el-icon>

              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload> -->
            <el-input v-model="form.image" autocomplete="off" placeholder="请输入图片路径" />
          </el-form-item>
          <el-form-item label="检测区域" :label-width="formLabelWidth">
            <el-input v-model="form.bourn" autocomplete="off" placeholder="请输入检测区域" />
          </el-form-item>
          <el-form-item label="环境监测状态" :label-width="formLabelWidth">
            <el-switch v-model="form.switch" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
      <div class="fen">
        <!-- <pagination :tableData="smartdata" @senTo="Toparent"></pagination> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus'
import { computed, onMounted, ref, reactive } from 'vue'
import { getsmart } from '../../request/index'
import { ElMessage } from 'element-plus'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

import type { UploadFile } from 'element-plus'
//搜索
const search = ref('')
//宽度
const formLabelWidth = '140px'
//是编辑还是新增
const flag = ref(true)
//表格
const smartdata = ref([])
//分页
const FenTable = ref([])
//子传父
const Toparent = (val: any[]) => {
  FenTable.value = val
}
//搜索
const sou = () => {
  console.log(search.value)
  FenTable.value = FenTable.value.filter(
    (data) => !search.value || data.stuName.toLowerCase().includes(search.value.toLowerCase())
  )
}
//图片

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
  console.log(111)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
  console.log(222)
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
  console.log(333)
}
//加载
onMounted(() => {
  getsmart().then((res) => {
    console.log(res, '表格数据1')
    smartdata.value = res.data.data.result[0].list
    Toparent(smartdata.value.slice(0, 6))
  })
})
//
const dialogFormVisible = ref(false)
//新增数据
const form = reactive({
  stuNo: 0,
  stuName: '',
  image: '',
  bourn: '',
  switch: false
})
//是否显示
const add = () => {
  dialogFormVisible.value = true
  flag.value = true
  form.stuName = ''
  form.image = ''
  form.bourn = ''
  form.switch = false
}
//表格ts
interface User {
  stuNo: number
  stuName: string
  image: string
  bourn: string
  switch: boolean
}
//编辑
const handleEdit = (index: number, row: User) => {
  dialogFormVisible.value = true
  flag.value = false
  // console.log(index, row)
  form.stuNo = row.stuNo
  form.stuName = row.stuName
  form.image = row.image
  form.bourn = row.bourn
  form.switch = row.switch
}
//删除
const confirm = (index: number, row: User) => {
  smartdata.value.forEach((item: User, index) => {
    if (item.stuNo == row.stuNo) {
      FenTable.value.splice(index, 1)
    }
  })
}
//取消表单
const cancel = () => {
  dialogFormVisible.value = false
}
//提交表单https://ts3.cn.mm.bing.net/th?id=ORMS.ae6b8df99ad38e3e18e1fad7a8fedee5&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.2000000476837158&p=0
const submit = () => {
  if (flag.value) {
    let obj = {
      stuNo: +new Date(),
      stuName: form.stuName,
      image: form.image,
      bourn: form.bourn,
      switch: form.switch
    }
    console.log(obj)
    FenTable.value.unshift(obj)
  } else {
    let items: any = FenTable.value.find((item: any) => item.stuNo == form.stuNo)
    console.log(items)

    items.stuName = form.stuName
    items.image = form.image
    items.bourn = form.bourn
    items.switch = form.switch
  }
  dialogFormVisible.value = false
}
//取消
const quxaio = () => {
  ElMessage.error('取消删除')
}
const allselectids = ref([])
//选择框
const allselect = (val: any) => {
  let ids = val.map((item: any, index: number) => {
    return item.stuNo
  })
  allselectids.value = ids
}
//批量删除
const delall = () => {
  let ids = allselectids.value
  console.log(ids)

  FenTable.value = FenTable.value.filter((item) => !ids.includes(item.stuNo))
}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  padding-top: 20px;
}
.table {
  background: #fff;
  margin-left: 20px;
  margin-right: 20px;
  height: 700px;
}
.fen {
  background: #fff;
  height: 100px;
  display: flex;
  align-items: center;
}
.top {
  height: 100px;
  border-bottom: 1px solid #ccc;
  .top_item {
    height: 60px;
    display: flex;
    align-items: center;
  }
}
</style>